<script setup lang="ts">
import {SContact} from '@xtail/vue3'
import type {CrudTablePropsType} from './types'

defineOptions({
  name: 'XCrudTable',
})

withDefaults(defineProps<CrudTablePropsType>(), {
  title: '',
  colSettingProps: {} as any,
})

const columns = defineModel('columns', {default: []})
</script>

<template>
  <div class="x-crud-table">
    <div class="x-crud-table__header">
      <slot name="title">
        <div class="x-crud-table__title">{{ title }}</div>
      </slot>
      <s-contact class="x-crud-table__operations">
        <slot name="operations"/>
      </s-contact>
    </div>
    <div class="x-crud-table__table">
      <n-table />
    </div>
  </div>
</template>

<style lang="scss">
@use './style' as *;
</style>
